<template>
  <div class="demo-container">
    <!-- 面包屑导航 - 显示当前页面层级路径 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>仓库管理</el-breadcrumb-item>
      <el-breadcrumb-item>货位</el-breadcrumb-item>
    </el-breadcrumb>
    <br>

    <!-- 条件查询区域 - 支持多条件组合查询 -->
    <el-card class="card search-card" shadow="hover">
      <el-form :model="searchForm" inline class="search-form">
        <!-- 货位关键词搜索 - 支持名称和编号模糊查询 -->
        <el-form-item label="货位">
          <el-input v-model="searchForm.keyword" placeholder="请输入货位名称/编号" clearable style="width: 220px;" />
        </el-form-item>

        <!-- 货位状态筛选 - 启用/停用状态选择 -->
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择" clearable style="width: 220px;">
            <el-option key="1" label="启用" :value="1" />
            <el-option key="2" label="停用" :value="2" />
            <el-option key="3" label="锁定" :value="3" />
          </el-select>
        </el-form-item>

        <!-- 货位类型筛选 - 下拉框选择 -->
        <el-form-item label="货位类型">
          <el-select v-model="searchForm.binType" placeholder="请选择" clearable style="width: 220px;">
            <el-option key="1" label="标准货位" value="standard" />
            <el-option key="2" label="重型货位" value="heavy" />
            <el-option key="3" label="冷藏货位" value="cold" />
            <el-option key="4" label="危险品货位" value="dangerous" />
          </el-select>
        </el-form-item>

        <!-- 所属库位筛选 - 下拉框选择 -->
        <el-form-item label="所属库位">
          <el-select v-model="searchForm.locationId" placeholder="请选择" clearable style="width: 220px;">
            <el-option v-for="location in locationList" :key="location.id" :label="location.locationName"
              :value="location.id" />
          </el-select>
        </el-form-item>

        <!-- 所属仓库筛选 - 下拉框选择 -->
        <el-form-item label="所属仓库">
          <el-select v-model="searchForm.warehouseId" placeholder="请选择" clearable style="width: 220px;">
            <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :label="warehouse.warehouseName"
              :value="warehouse.id" />
          </el-select>
        </el-form-item>

        <!-- 查询操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="searchBins">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作和内容区域 - 包含工具栏和数据表格 -->
    <el-card class="card content-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="operation-buttons">
            <!-- 新增货位按钮 -->
            <el-button type="primary" @click="openCreateBinDialog">
              <el-icon>
                <Plus />
              </el-icon>新增
            </el-button>
            <!-- 导出数据按钮 -->
            <el-button type="success" @click="handleExport">
              <el-icon>
                <Download />
              </el-icon>导出
            </el-button>
            <!-- 批量删除按钮 - 需要选择行才能启用 -->
            <el-button type="warning" @click="handleBatchDelete" :disabled="selectedRows.length === 0">
              <el-icon>
                <Delete />
              </el-icon>批量删除
            </el-button>
          </div>
        </div>
      </template>

      <!-- 数据表格 - 展示货位列表数据 -->
      <el-table :data="tableData" border style="width: 100%" v-loading="loading"
        @selection-change="handleSelectionChange" row-key="id" max-height="600">
        <!-- 选择列 - 支持多选操作 -->
        <el-table-column type="selection" width="55" fixed="left" />
        <!-- 序号列 - 显示行号 -->
        <el-table-column type="index" label="序号" width="60" fixed="left" />
        <!-- 货位编号列 -->
        <el-table-column prop="binCode" label="货位编号" width="120" fixed="left" />
        <!-- 货位名称列 - 支持文本溢出提示 -->
        <el-table-column prop="binName" label="货位名称" width="150" fixed="left" :show-overflow-tooltip="true" />
        <!-- 货位类型列 -->
        <el-table-column prop="binType" label="货位类型" width="100">
          <template #default="scope">
            <el-tag :type="getBinTypeTagType(scope.row.binType)">
              {{ getBinTypeLabel(scope.row.binType) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 尺寸信息列 -->
        <el-table-column label="尺寸信息" width="200">
          <template #default="scope">
            <div>{{ scope.row.length }}×{{ scope.row.width }}×{{ scope.row.height }}m</div>
          </template>
        </el-table-column>
        <!-- 重量信息列 -->
        <el-table-column label="重量信息" width="150">
          <template #default="scope">
            <div>已用: {{ scope.row.usedWeight }}/{{ scope.row.maxWeight }}kg</div>
          </template>
        </el-table-column>
        <!-- 体积信息列 -->
        <el-table-column label="体积信息" width="150">
          <template #default="scope">
            <div>已用: {{ scope.row.usedVolume }}m³</div>
          </template>
        </el-table-column>
        <!-- 所属库位列 -->
        <el-table-column prop="locationName" label="所属库位" width="120" :show-overflow-tooltip="true" />
        <!-- 所属仓库列 -->
        <el-table-column prop="warehouseName" label="所属仓库" width="120" :show-overflow-tooltip="true" />
        <!-- 货位状态列 - 使用不同颜色标签显示 -->
        <el-table-column prop="status" label="货位状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 排序号列 -->
        <el-table-column prop="sortOrder" label="排序号" width="80" />
        <!-- 备注列 -->
        <el-table-column prop="remark" label="备注" width="200" :show-overflow-tooltip="true" />
        <!-- 创建人列 -->
        <el-table-column prop="createBy" label="创建人" width="100" :show-overflow-tooltip="true" />
        <!-- 创建时间列 -->
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <!-- 操作列 - 固定在右侧 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <!-- 编辑按钮 -->
            <el-button type="primary" size="small" @click="handleEdit(row)">
              <el-icon>
                <Edit />
              </el-icon>编辑
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" size="small" @click="handleDelete(row)">
              <el-icon>
                <Delete />
              </el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分页区域 - 支持分页导航和页面大小调整 -->
    <el-card class="card pagination-card" shadow="hover">
      <div class="pagination-container">
        <!-- 分页信息显示 -->
        <div class="pagination-info">
          <span>
            共 {{ pagination.total }} 条记录，
            当前显示第 {{ (pagination.current - 1) * pagination.pageSize + 1 }} -
            {{ Math.min(pagination.current * pagination.pageSize, pagination.total) }} 条
          </span>
        </div>
        <!-- 分页组件 -->
        <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 新增/编辑货位对话框 - 模态框表单 -->
    <el-dialog v-model="dialogVisible" :title="dialogType === 'create' ? '新增货位' : '编辑货位'" width="80%">
      <el-form :model="binForm" label-width="120px">
        <!-- 基础信息分组 -->
        <el-divider>基础信息</el-divider>
        <el-row :gutter="20">
          <!-- 货位编号输入框 -->
          <el-col :span="12">
            <el-form-item label="货位编号" required>
              <el-input v-model="binForm.binCode" placeholder="请输入货位编号" />
            </el-form-item>
          </el-col>
          <!-- 货位名称输入框 -->
          <el-col :span="12">
            <el-form-item label="货位名称" required>
              <el-input v-model="binForm.binName" placeholder="请输入货位名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <!-- 货位类型选择框 -->
          <el-col :span="12">
            <el-form-item label="货位类型" required>
              <el-select v-model="binForm.binType" placeholder="请选择" style="width: 100%">
                <el-option key="1" label="标准货位" value="standard" />
                <el-option key="2" label="重型货位" value="heavy" />
                <el-option key="3" label="冷藏货位" value="cold" />
                <el-option key="4" label="危险品货位" value="dangerous" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 所属库位选择框 -->
          <el-col :span="12">
            <el-form-item label="所属库位" required>
              <el-select v-model="binForm.locationId" placeholder="请选择" style="width: 100%">
                <el-option v-for="location in locationList" :key="location.id" :label="location.locationName"
                  :value="location.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 尺寸信息分组 -->
        <el-divider>尺寸信息</el-divider>
        <el-row :gutter="20">
          <!-- 长度输入框 -->
          <el-col :span="8">
            <el-form-item label="长度(m)">
              <el-input-number v-model="binForm.length" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <!-- 宽度输入框 -->
          <el-col :span="8">
            <el-form-item label="宽度(m)">
              <el-input-number v-model="binForm.width" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <!-- 高度输入框 -->
          <el-col :span="8">
            <el-form-item label="高度(m)">
              <el-input-number v-model="binForm.height" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 重量信息分组 -->
        <el-divider>重量信息</el-divider>
        <el-row :gutter="20">
          <!-- 最大重量输入框 -->
          <el-col :span="12">
            <el-form-item label="最大重量(kg)">
              <el-input-number v-model="binForm.maxWeight" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <!-- 已用重量输入框 -->
          <el-col :span="12">
            <el-form-item label="已用重量(kg)">
              <el-input-number v-model="binForm.usedWeight" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <!-- 已用体积输入框 -->
          <el-col :span="12">
            <el-form-item label="已用体积(m³)">
              <el-input-number v-model="binForm.usedVolume" :min="0" :precision="2" style="width: 100%" />
            </el-form-item>
          </el-col>
          <!-- 排序号输入框 -->
          <el-col :span="12">
            <el-form-item label="排序号">
              <el-input-number v-model="binForm.sortOrder" :min="0" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <!-- 状态单选按钮组 -->
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="binForm.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">停用</el-radio>
                <el-radio :label="3">锁定</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 创建者输入框 -->
          <el-col :span="12">
            <el-form-item label="创建者" required>
              <el-input v-model="binForm.createBy" placeholder="请输入创建者" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 备注文本域 -->
        <el-form-item label="备注">
          <el-input v-model="binForm.remark" type="textarea" :rows="4" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 导入Vue组合式API
import { ref, reactive, onMounted } from 'vue'
// 导入Element Plus组件和图标
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete, Download } from '@element-plus/icons-vue'
// 导入HTTP请求工具
import http, { clearCache } from '@/Axios/Htttp'

// ==================== 类型定义 ====================

/**
 * 货位表单数据类型定义
 * 用于新增和编辑货位时的表单数据
 */
interface BinForm {
  id: number;                    // 货位ID
  binCode: string;               // 货位编号
  binName: string;               // 货位名称
  length: number;                // 长度
  width: number;                 // 宽度
  height: number;                // 高度
  maxWeight: number;             // 最大重量
  usedVolume: number;            // 已用体积
  usedWeight: number;            // 已用重量
  status: number;                // 状态：1-启用，2-停用，3-锁定
  statusName: string;            // 状态名称
  binType: string;               // 货位类型
  sortOrder: number;             // 排序号
  remark: string;                // 备注
  locationId: number;            // 所属库位ID
  locationName: string;          // 所属库位名称
  warehouseName: string;         // 所属仓库名称
  createBy: string;              // 创建者
  createTime: string;            // 创建时间
  updateBy: string;              // 更新者
  updateTime: string;            // 更新时间
  [key: string]: any;            // 索引签名，支持动态属性
}

/**
 * 货位列表项数据类型定义
 * 用于表格显示的数据结构
 */
interface BinItem {
  id: number;                    // 货位ID
  binCode: string;               // 货位编号
  binName: string;               // 货位名称
  length: number;                // 长度
  width: number;                 // 宽度
  height: number;                // 高度
  maxWeight: number;             // 最大重量
  usedVolume: number;            // 已用体积
  usedWeight: number;            // 已用重量
  status: number;                // 状态
  statusName: string;            // 状态名称
  binType: string;               // 货位类型
  sortOrder: number;             // 排序号
  remark: string;                // 备注
  locationId: number;            // 所属库位ID
  locationName: string;          // 所属库位名称
  warehouseName: string;         // 所属仓库名称
  createBy: string;              // 创建者
  createTime: string;            // 创建时间
  updateBy: string;              // 更新者
  updateTime: string;            // 更新时间
  [key: string]: any;            // 索引签名
}

/**
 * 库位选项数据类型定义
 * 用于下拉框选择的库位列表
 */
interface LocationOption {
  id: number;                    // 库位ID
  locationName: string;          // 库位名称
  [key: string]: any;            // 索引签名
}

/**
 * 仓库选项数据类型定义
 * 用于下拉框选择的仓库列表
 */
interface WarehouseOption {
  id: number;                    // 仓库ID
  warehouseName: string;         // 仓库名称
  [key: string]: any;            // 索引签名
}

// ==================== 响应式数据定义 ====================

/**
 * 搜索表单数据
 * 用于条件查询的参数
 */
const searchForm = reactive({
  keyword: '',        // 关键词搜索
  status: '',         // 状态筛选
  binType: '',        // 货位类型筛选
  locationId: '',     // 库位ID筛选
  warehouseId: ''     // 仓库ID筛选
})

/**
 * 表格相关数据
 */
const tableData = ref<BinItem[]>([])    // 表格数据
const loading = ref(false)              // 加载状态
const selectedRows = ref<BinItem[]>([]) // 选中的行数据

/**
 * 分页配置
 */
const pagination = reactive({
  current: 1,     // 当前页码
  pageSize: 10,   // 每页显示数量
  total: 0        // 总记录数
})

/**
 * 对话框控制
 */
const dialogVisible = ref(false)              // 对话框显示状态
const dialogType = ref('create')              // 对话框类型：create-新增，edit-编辑

/**
 * 货位表单数据
 * 用于新增和编辑货位的表单
 */
const binForm = reactive<BinForm>({
  id: 0,
  binCode: '',
  binName: '',
  length: 0,
  width: 0,
  height: 0,
  maxWeight: 0,
  usedVolume: 0,
  usedWeight: 0,
  status: 1,
  statusName: '',
  binType: 'standard',
  sortOrder: 0,
  remark: '',
  locationId: 0,
  locationName: '',
  warehouseName: '',
  createBy: 'admin',
  createTime: '',
  updateBy: '',
  updateTime: ''
})

/**
 * 库位列表数据
 * 用于下拉框选择的库位选项
 */
const locationList = ref<LocationOption[]>([])

/**
 * 仓库列表数据
 * 用于下拉框选择的仓库选项
 */
const warehouseList = ref<WarehouseOption[]>([])

// ==================== 工具函数 ====================

/**
 * 获取状态标签类型
 * 根据状态值返回对应的标签颜色类型
 * @param status 状态值
 * @returns 标签类型
 */
const getStatusTagType = (status: number): string => {
  switch (status) {
    case 1: return 'success'  // 启用 - 绿色
    case 2: return 'info'     // 停用 - 灰色
    case 3: return 'warning'  // 锁定 - 橙色
    default: return 'info'
  }
}

/**
 * 获取状态标签文本
 * 根据状态值返回对应的中文标签文本
 * @param status 状态值
 * @returns 状态文本
 */
const getStatusLabel = (status: number): string => {
  switch (status) {
    case 1: return '启用'
    case 2: return '停用'
    case 3: return '锁定'
    default: return '未知'
  }
}

/**
 * 获取货位类型标签类型
 * 根据货位类型返回对应的标签颜色类型
 * @param binType 货位类型
 * @returns 标签类型
 */
const getBinTypeTagType = (binType: string): string => {
  switch (binType) {
    case 'standard': return 'primary'   // 标准货位 - 蓝色
    case 'heavy': return 'warning'      // 重型货位 - 橙色
    case 'cold': return 'info'          // 冷藏货位 - 灰色
    case 'dangerous': return 'danger'   // 危险品货位 - 红色
    default: return 'info'
  }
}

/**
 * 获取货位类型标签文本
 * 根据货位类型返回对应的中文标签文本
 * @param binType 货位类型
 * @returns 货位类型文本
 */
const getBinTypeLabel = (binType: string): string => {
  switch (binType) {
    case 'standard': return '标准货位'
    case 'heavy': return '重型货位'
    case 'cold': return '冷藏货位'
    case 'dangerous': return '危险品货位'
    default: return '未知类型'
  }
}

// ==================== 库位和仓库列表相关方法 ====================

/**
 * 获取库位列表数据
 * 调用API获取库位选项列表
 */
const getLocationList = async () => {
  try {
    // 使用分页接口获取所有库位数据
    const response = await http.get('/api/WMS_Location/GetLocationPageList', {
      params: {
        PageIndex: 1,
        PageSize: 1000, // 设置较大的页面大小以获取所有库位
        Keyword: '',
        Status: '',
        WarehouseId: ''
      }
    })

    if (response.data.code === 200) {
      // 从分页数据中提取库位列表
      const locationData = response.data.pageData || []
      locationList.value = locationData.map((item: any) => ({
        id: item.id,
        locationName: item.locationName,
        locationCode: item.locationCode
      }))
      console.log('库位列表加载成功:', locationList.value)
    } else {
      console.error('获取库位列表失败:', response.data.message)
      ElMessage.error(response.data.message || '获取库位列表失败')
    }
  } catch (error) {
    console.error('获取库位列表异常:', error)
    ElMessage.error('获取库位列表失败')
  }
}

/**
 * 获取仓库列表数据
 * 调用API获取仓库选项列表
 */
const getWarehouseList = async () => {
  try {
    // 使用分页接口获取所有仓库数据
    const response = await http.get('/api/WMS_Warehouse/GetWarehousePageList', {
      params: {
        PageIndex: 1,
        PageSize: 1000, // 设置较大的页面大小以获取所有仓库
        Keyword: '',
        Status: '',
        DepartmentId: '',
        ManagerId: ''
      }
    })

    if (response.data.code === 200) {
      // 从分页数据中提取仓库列表
      const warehouseData = response.data.pageData || []
      warehouseList.value = warehouseData.map((item: any) => ({
        id: item.id,
        warehouseName: item.warehouseName,
        warehouseCode: item.warehouseCode
      }))
      console.log('仓库列表加载成功:', warehouseList.value)
    } else {
      console.error('获取仓库列表失败:', response.data.message)
      ElMessage.error(response.data.message || '获取仓库列表失败')
    }
  } catch (error) {
    console.error('获取仓库列表异常:', error)
    ElMessage.error('获取仓库列表失败')
  }
}

// ==================== 核心业务方法 ====================

/**
 * 获取货位列表数据
 * 调用API获取分页数据并处理响应
 */
const getBinList = async () => {
  loading.value = true // 显示加载状态
  try {
    console.time('请求耗时') // 性能监控

    // 构建查询参数 - 根据API文档中的参数
    const params = {
      PageIndex: pagination.current,      // 当前页码
      PageSize: pagination.pageSize,      // 每页大小
      Keyword: searchForm.keyword,        // 关键词
      Status: searchForm.status,          // 状态
      BinType: searchForm.binType,        // 货位类型
      LocationId: searchForm.locationId,  // 库位ID
      WarehouseId: searchForm.warehouseId // 仓库ID
    }

    // 发送API请求 - 使用图片中显示的接口地址
    const response = await http.get('/api/WMS_Bin/GetBinPageList', { params })
    console.timeEnd('请求耗时')

    // 处理API响应
    if (response.data.code === 200) {
      let listData, totalCount

      // 解析API返回的数据结构 - 根据图片中的响应格式
      if (response.data.pageData && response.data.todalCount !== undefined) {
        // 直接返回pageData和todalCount的情况
        listData = response.data.pageData
        totalCount = response.data.todalCount
      } else if (response.data.result) {
        // 数据在result字段中的情况
        if (Array.isArray(response.data.result)) {
          // result直接是数组
          listData = response.data.result
          totalCount = response.data.total || response.data.count || listData.length
        } else if (response.data.result.list && Array.isArray(response.data.result.list)) {
          // result中有list数组
          listData = response.data.result.list
          totalCount = response.data.result.total || response.data.result.count || listData.length
        } else if (response.data.result.pageData && Array.isArray(response.data.result.pageData)) {
          // result中有pageData数组
          listData = response.data.result.pageData
          totalCount = response.data.result.todalCount || response.data.result.total || listData.length
        } else {
          // 无法识别的数据结构
          listData = []
          totalCount = 0
          console.error('无法识别的数据结构:', response.data)
        }
      } else {
        // 默认空数据
        listData = []
        totalCount = 0
        console.error('无法识别的数据结构:', response.data)
      }

      // 更新表格数据和分页信息
      tableData.value = listData || []
      pagination.total = totalCount || 0

      // 字段名映射处理，确保与表格列名一致
      tableData.value = tableData.value.map((item: any) => {
        return {
          id: item.id,
          binCode: item.binCode,
          binName: item.binName,
          length: item.length,
          width: item.width,
          height: item.height,
          maxWeight: item.maxWeight,
          usedVolume: item.usedVolume,
          usedWeight: item.usedWeight,
          status: item.status,
          statusName: item.statusName,
          binType: item.binType,
          sortOrder: item.sortOrder,
          remark: item.remark,
          locationId: item.locationId,
          locationName: item.locationName,
          warehouseName: item.warehouseName,
          createBy: item.createBy,
          createTime: item.createTime,
          updateBy: item.updateBy,
          updateTime: item.updateTime
        }
      })
    } else {
      // API返回错误
      ElMessage.error(response.data.message || '获取货位列表失败')
    }
  } catch (error) {
    // 网络请求异常
    console.error('获取货位列表失败:', error)
    ElMessage.error('获取货位列表失败')
  } finally {
    loading.value = false // 隐藏加载状态
  }
}

/**
 * 搜索货位
 * 重置到第一页并执行查询
 */
const searchBins = () => {
  pagination.current = 1 // 重置到第一页
  getBinList()          // 执行查询
}

/**
 * 重置搜索条件
 * 清空所有搜索条件并重新查询
 */
const resetSearch = () => {
  // 清空搜索表单
  searchForm.keyword = ''
  searchForm.status = ''
  searchForm.binType = ''
  searchForm.locationId = ''
  searchForm.warehouseId = ''
  pagination.current = 1 // 重置到第一页
  getBinList()          // 重新查询
}

/**
 * 打开新增货位对话框
 * 重置表单数据并显示对话框
 */
const openCreateBinDialog = () => {
  dialogType.value = 'create' // 设置为新增模式

  // 重置表单数据
  Object.keys(binForm).forEach(key => {
    if (key === 'status') {
      binForm[key] = 1 // 默认启用状态
    } else if (key === 'binType') {
      binForm[key] = 'standard' // 默认标准货位类型
    } else if (key === 'length' || key === 'width' || key === 'height' ||
      key === 'maxWeight' || key === 'usedVolume' || key === 'usedWeight' ||
      key === 'sortOrder') {
      binForm[key] = 0 // 默认数值为0
    } else if (key === 'createBy') {
      binForm[key] = 'admin' // 默认创建者
    } else if (key === 'locationId') {
      binForm[key] = 0 // 默认库位ID为0
    } else {
      binForm[key] = '' // 其他字段清空
    }
  })

  // 确保库位和仓库列表已加载
  Promise.all([
    locationList.value.length === 0 ? getLocationList() : Promise.resolve(),
    warehouseList.value.length === 0 ? getWarehouseList() : Promise.resolve()
  ]).then(() => {
    dialogVisible.value = true // 显示对话框
  })
}

/**
 * 编辑货位
 * 获取货位详情并打开编辑对话框
 * @param row 要编辑的货位行数据
 */
const handleEdit = async (row: BinItem) => {
  dialogType.value = 'edit' // 设置为编辑模式

  try {
    // 获取货位详情
    const response = await http.get(`api/WMS_Bin/GetBinById?id=${row.id}`)

    if (response.data.code === 200) {
      const data = response.data.result || {}

      // 将API数据映射到表单字段
      binForm.id = data.id || 0
      binForm.binCode = data.binCode || ''
      binForm.binName = data.binName || ''
      binForm.length = data.length || 0
      binForm.width = data.width || 0
      binForm.height = data.height || 0
      binForm.maxWeight = data.maxWeight || 0
      binForm.usedVolume = data.usedVolume || 0
      binForm.usedWeight = data.usedWeight || 0
      binForm.status = data.status || 1
      binForm.statusName = data.statusName || ''
      binForm.binType = data.binType || 'standard'
      binForm.sortOrder = data.sortOrder || 0
      binForm.remark = data.remark || ''
      binForm.locationId = data.locationId || 0
      binForm.locationName = data.locationName || ''
      binForm.warehouseName = data.warehouseName || ''
      binForm.createBy = data.createBy || 'admin'
      binForm.createTime = data.createTime || ''
      binForm.updateBy = data.updateBy || ''
      binForm.updateTime = data.updateTime || ''

      // 确保库位和仓库列表已加载
      await Promise.all([
        locationList.value.length === 0 ? getLocationList() : Promise.resolve(),
        warehouseList.value.length === 0 ? getWarehouseList() : Promise.resolve()
      ])

      dialogVisible.value = true // 显示对话框
    } else {
      ElMessage.error(response.data.message || '获取货位详情失败')
    }
  } catch (error) {
    console.error('获取货位详情失败:', error)
    ElMessage.error('获取货位详情失败')
  }
}

/**
 * 删除货位
 * 单个货位删除操作
 * @param row 要删除的货位行数据
 */
const handleDelete = (row: BinItem) => {
  // 显示确认对话框
  ElMessageBox.confirm('确定要删除该货位吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const updatedBy = binForm.createBy || 'admin'

      // 发送删除请求
      const response = await http.delete(`/api/WMS_Bin/DeleteBin?id=${row.id}`)

      if (response.data.code === 200) {
        ElMessage.success('删除成功')
        clearCache()        // 清除缓存
        getBinList()        // 重新加载数据
      } else {
        ElMessage.error(response.data.message || '删除失败')
      }
    } catch (error) {
      console.error('删除货位失败:', error)
      ElMessage.error('删除失败')
    }
  }).catch(() => {
    // 用户取消删除操作
  })
}

/**
 * 批量删除货位
 * 删除多个选中的货位
 */
const handleBatchDelete = () => {
  // 检查是否有选中的行
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的货位')
    return
  }

  // 显示确认对话框
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} 个货位吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const ids = selectedRows.value.map(row => row.id) // 提取ID数组
      const updatedBy = binForm.createBy || 'admin'

      // 发送批量删除请求
      const response = await http.delete(
        `api/WMS_Bin/BatchDeleteBins?updatedBy=${updatedBy}`,
        { data: ids }
      )

      if (response.data.code === 200) {
        ElMessage.success('批量删除成功')
        clearCache()        // 清除缓存
        getBinList()        // 重新加载数据
      } else {
        ElMessage.error(response.data.message || '批量删除失败')
      }
    } catch (error) {
      console.error('批量删除货位失败:', error)
      ElMessage.error('批量删除失败')
    }
  }).catch(() => {
    // 用户取消删除操作
  })
}

/**
 * 导出货位数据
 * 预留导出功能接口
 */
const handleExport = () => {
  ElMessage.info('导出功能暂未实现')
}

/**
 * 提交表单
 * 新增或编辑货位的保存操作
 */
const submitForm = async () => {
  try {
    // 表单验证
    if (!binForm.binCode?.trim()) {
      ElMessage.warning('请输入货位编号')
      return
    }
    if (!binForm.binName?.trim()) {
      ElMessage.warning('请输入货位名称')
      return
    }
    if (!binForm.binType) {
      ElMessage.warning('请选择货位类型')
      return
    }
    if (!binForm.locationId) {
      ElMessage.warning('请选择所属库位')
      return
    }
    if (!binForm.createBy?.trim()) {
      ElMessage.warning('请输入创建者')
      return
    }

    // 构建提交的数据对象，将表单字段映射为API需要的格式
    const formData = {
      id: binForm.id,
      binCode: binForm.binCode.trim(),
      binName: binForm.binName.trim(),
      length: binForm.length,
      width: binForm.width,
      height: binForm.height,
      maxWeight: binForm.maxWeight,
      usedVolume: binForm.usedVolume,
      usedWeight: binForm.usedWeight,
      status: binForm.status,
      statusName: binForm.statusName,
      binType: binForm.binType,
      sortOrder: binForm.sortOrder,
      remark: binForm.remark?.trim() || '',
      locationId: binForm.locationId,
      locationName: binForm.locationName,
      warehouseName: binForm.warehouseName,
      createBy: binForm.createBy.trim(),
      updateBy: binForm.createBy.trim()
    }

    let response

    // 根据对话框类型决定是新增还是编辑
    if (dialogType.value === 'create') {
      // 新增货位
      response = await http.post('/api/WMS_Bin/CreateBin', formData)
    } else {
      // 编辑货位
      response = await http.put('/api/WMS_Bin/UpdateBin', formData)
    }

    // 处理响应结果
    if (response.data.code === 200) {
      ElMessage.success(dialogType.value === 'create' ? '新增成功' : '编辑成功')
      dialogVisible.value = false // 关闭对话框
      clearCache()               // 清除缓存
      getBinList()               // 重新加载数据
    } else {
      ElMessage.error(
        response.data.message ||
        (dialogType.value === 'create' ? '新增失败' : '编辑失败')
      )
    }
  } catch (error) {
    console.error(
      dialogType.value === 'create' ? '新增货位失败:' : '编辑货位失败:',
      error
    )
    ElMessage.error(dialogType.value === 'create' ? '新增失败' : '编辑失败')
  }
}

// ==================== 事件处理方法 ====================

/**
 * 表格选择行变化处理
 * @param rows 当前选中的行数据数组
 */
const handleSelectionChange = (rows: BinItem[]) => {
  selectedRows.value = rows // 更新选中的行数据
}

/**
 * 分页大小变化处理
 * @param val 新的页面大小
 */
const handleSizeChange = (val: number) => {
  pagination.pageSize = val // 更新页面大小
  getBinList()             // 重新加载数据
}

/**
 * 当前页码变化处理
 * @param val 新的页码
 */
const handleCurrentChange = (val: number) => {
  pagination.current = val // 更新当前页码
  getBinList()            // 重新加载数据
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时初始化
 * 页面加载完成后自动获取货位列表数据、库位列表数据和仓库列表数据
 */
onMounted(async () => {
  // 并行加载所有必要的数据
  await Promise.all([
    getLocationList(),  // 获取库位列表数据
    getWarehouseList(), // 获取仓库列表数据
    getBinList()        // 获取货位列表数据
  ])
})
</script>

<style scoped>
/* ==================== 基础容器样式 ==================== */

/**
 * 主容器样式
 * 设置渐变背景和基础布局
 */
.demo-container {
  padding: 20px;
  /* 渐变背景 - 深色主题 */
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #1a1a2e 75%, #16213e 100%);
  /* 径向渐变装饰 */
  background-image:
    radial-gradient(circle at 20% 80%, rgba(66, 165, 245, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(92, 107, 192, 0.1) 0%, transparent 50%);
  min-height: 100vh;
  position: relative;
}

/**
 * 纹理背景装饰
 * 添加细微的网格纹理效果
 */
.demo-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/**
 * 确保所有子元素在纹理之上
 */
.demo-container>* {
  position: relative;
  z-index: 1;
}

/* ==================== 卡片通用样式 ==================== */

/**
 * 卡片基础样式
 * 毛玻璃效果和阴影
 */
.card {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(15px);
  /* 毛玻璃效果 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ==================== 页头和操作区样式 ==================== */

/**
 * 卡片头部样式
 * 操作按钮区域布局
 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/**
 * 操作按钮组样式
 * 按钮间距设置
 */
.operation-buttons {
  display: flex;
  gap: 10px;
  /* 按钮间距 */
}

/* ==================== 分页区域样式 ==================== */

/**
 * 分页容器样式
 * 分页信息和分页组件的布局
 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/**
 * 分页信息文本样式
 */
.pagination-info {
  color: #666;
  font-size: 14px;
}

/* ==================== Element Plus 组件样式覆盖 ==================== */

/**
 * 卡片悬停效果
 */
:deep(.el-card:hover) {
  transform: translateY(-2px);
  /* 轻微上移 */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
  /* 增强阴影 */
}

/**
 * 卡片头部样式
 */
:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(235, 238, 245, 0.5);
  background: rgba(248, 249, 250, 0.5);
  border-radius: 12px 12px 0 0;
}

/**
 * 表格样式设置
 */
:deep(.el-table) {
  margin-top: 10px;
  background: transparent;
}

/**
 * 表格头部样式
 */
:deep(.el-table__header-wrapper) {
  background: rgba(64, 158, 255, 0.1);
  /* 淡蓝色背景 */
}

/**
 * 表格主体样式
 */
:deep(.el-table__body-wrapper) {
  background: transparent;
}

/**
 * 面包屑导航样式
 */
:deep(.el-breadcrumb__inner) {
  color: #2c3e50;
  font-weight: 500;
}

/**
 * 面包屑悬停效果
 */
:deep(.el-breadcrumb__inner:hover) {
  color: #409EFF;
  /* 主题蓝色 */
}

/**
 * 对话框样式优化
 */
:deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

/**
 * 对话框头部样式
 */
:deep(.el-dialog__header) {
  background: rgba(248, 249, 250, 0.8);
  border-bottom: 1px solid rgba(235, 238, 245, 0.5);
  padding: 20px;
}

/**
 * 对话框标题样式
 */
:deep(.el-dialog__title) {
  font-weight: 600;
  color: #2c3e50;
}

/**
 * 对话框内容区域样式
 */
:deep(.el-dialog__body) {
  padding: 30px 20px;
  max-height: 70vh;
  overflow-y: auto;
}

/**
 * 对话框底部样式
 */
:deep(.el-dialog__footer) {
  background: rgba(248, 249, 250, 0.8);
  border-top: 1px solid rgba(235, 238, 245, 0.5);
  padding: 15px 20px;
}

/**
 * 分割线样式
 */
:deep(.el-divider) {
  margin: 20px 0;
}

:deep(.el-divider__text) {
  background: rgba(255, 255, 255, 0.92);
  color: #409EFF;
  font-weight: 600;
}

/**
 * 表单样式优化
 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #2c3e50;
}

/**
 * 输入框样式
 */
:deep(.el-input__wrapper) {
  border-radius: 6px;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF inset;
}

/**
 * 数字输入框样式
 */
:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-input-number .el-input__wrapper) {
  border-radius: 6px;
}

/**
 * 选择器样式
 */
:deep(.el-select) {
  width: 100%;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 6px;
}

/**
 * 单选按钮组样式
 */
:deep(.el-radio-group) {
  display: flex;
  gap: 20px;
}

:deep(.el-radio) {
  margin-right: 0;
}

/**
 * 文本域样式
 */
:deep(.el-textarea__inner) {
  border-radius: 6px;
  resize: vertical;
}

/**
 * 按钮样式增强
 */
:deep(.el-button) {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button:hover) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/**
 * 标签样式优化
 */
:deep(.el-tag) {
  border-radius: 4px;
  font-weight: 500;
}

/**
 * 分页组件样式
 */
:deep(.el-pagination) {
  justify-content: flex-end;
}

:deep(.el-pagination .el-pager li) {
  border-radius: 4px;
  margin: 0 2px;
}

/**
 * 加载状态样式
 */
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

/**
 * 消息提示样式
 */
:deep(.el-message) {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/**
 * 确认对话框样式
 */
:deep(.el-message-box) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-message-box__header) {
  background: rgba(248, 249, 250, 0.8);
  border-bottom: 1px solid rgba(235, 238, 245, 0.5);
}

:deep(.el-message-box__content) {
  padding: 30px 20px;
}

:deep(.el-message-box__btns) {
  background: rgba(248, 249, 250, 0.8);
  border-top: 1px solid rgba(235, 238, 245, 0.5);
  padding: 15px 20px;
}

/**
 * 响应式布局优化
 */
@media (max-width: 1200px) {
  .demo-container {
    padding: 15px;
  }

  :deep(.el-table) {
    font-size: 13px;
  }

  :deep(.el-table .cell) {
    padding: 8px 0;
  }
}

@media (max-width: 768px) {
  .demo-container {
    padding: 10px;
  }

  .card {
    margin-bottom: 15px;
  }

  :deep(.el-form--inline .el-form-item) {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-dialog) {
    width: 95% !important;
    margin: 5vh auto !important;
  }

  :deep(.el-dialog__body) {
    padding: 20px 15px;
  }
}

/**
 * 动画效果
 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo-container {
  animation: fadeIn 0.5s ease-out;
}

.card {
  animation: fadeIn 0.6s ease-out;
}

.card:nth-child(2) {
  animation-delay: 0.1s;
}

.card:nth-child(3) {
  animation-delay: 0.2s;
}

/**
 * 滚动条样式优化
 */
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: rgba(64, 158, 255, 0.5);
  border-radius: 3px;
}

:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: rgba(64, 158, 255, 0.7);
}

/**
 * 对话框滚动条样式
 */
:deep(.el-dialog__body::-webkit-scrollbar) {
  width: 6px;
}

:deep(.el-dialog__body::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

:deep(.el-dialog__body::-webkit-scrollbar-thumb) {
  background: rgba(64, 158, 255, 0.5);
  border-radius: 3px;
}

:deep(.el-dialog__body::-webkit-scrollbar-thumb:hover) {
  background: rgba(64, 158, 255, 0.7);
}

/**
 * 表格行悬停效果
 */
:deep(.el-table__row:hover) {
  background: rgba(64, 158, 255, 0.05) !important;
}

/**
 * 表格选中行样式
 */
:deep(.el-table__row.current-row) {
  background: rgba(64, 158, 255, 0.1) !important;
}

/**
 * 表格固定列阴影效果
 */
:deep(.el-table__fixed-right::before) {
  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.15);
}

:deep(.el-table__fixed::before) {
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
}

/**
 * 搜索表单响应式布局
 */
@media (max-width: 1400px) {
  :deep(.el-form--inline .el-form-item) {
    margin-right: 15px;
    margin-bottom: 15px;
  }

  :deep(.el-form-item__content) {
    min-width: 180px;
  }
}

@media (max-width: 1000px) {
  :deep(.el-form--inline) {
    display: flex;
    flex-wrap: wrap;
  }

  :deep(.el-form--inline .el-form-item) {
    flex: 1 1 calc(50% - 15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }
}

/**
 * 操作按钮组响应式
 */
@media (max-width: 768px) {
  .operation-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }

  .operation-buttons .el-button {
    flex: 1;
    min-width: 80px;
  }
}

/**
 * 分页组件响应式
 */
@media (max-width: 600px) {
  .pagination-container {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .pagination-info {
    text-align: center;
  }

  :deep(.el-pagination) {
    justify-content: center;
  }
}

/**
 * 表格列宽响应式调整
 */
@media (max-width: 1200px) {
  :deep(.el-table .el-table__cell) {
    padding: 8px 4px;
  }
}

@media (max-width: 768px) {
  :deep(.el-table) {
    font-size: 12px;
  }

  :deep(.el-table .el-table__cell) {
    padding: 6px 2px;
  }

  :deep(.el-table .cell) {
    padding: 4px 0;
  }
}

/**
 * 对话框响应式优化
 */
@media (max-width: 768px) {
  :deep(.el-dialog) {
    width: 95% !important;
    margin: 2vh auto !important;
  }

  :deep(.el-dialog__body) {
    padding: 15px 10px;
    max-height: 60vh;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
  }

  :deep(.el-form-item__content) {
    font-size: 14px;
  }
}

/**
 * 表单布局响应式
 */
@media (max-width: 768px) {
  :deep(.el-row) {
    margin: 0 !important;
  }

  :deep(.el-col) {
    padding: 0 5px !important;
  }

  :deep(.el-form-item) {
    margin-bottom: 15px;
  }
}

/**
 * 性能优化 - 减少重绘
 */
:deep(.el-table__body-wrapper) {
  will-change: scroll-position;
}

:deep(.el-dialog__body) {
  will-change: scroll-position;
}

/**
 * 无障碍访问优化
 */
:deep(.el-button:focus) {
  outline: 2px solid #409EFF;
  outline-offset: 2px;
}

:deep(.el-input__inner:focus) {
  outline: 2px solid #409EFF;
  outline-offset: 2px;
}

:deep(.el-select .el-input__inner:focus) {
  outline: 2px solid #409EFF;
  outline-offset: 2px;
}

/**
 * 打印样式优化
 */
@media print {
  .demo-container {
    background: white !important;
  }

  .card {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  :deep(.el-button) {
    display: none !important;
  }

  :deep(.el-pagination) {
    display: none !important;
  }
}
</style>